<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Vue.js custom directive integration example (select2)</title>
    <script src="../dist/vue.js"></script>
    <script src="../dist/jquery-2.1.4.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <style>
    select {
        min-width: 300px;
    }
    </style>
</head>

<body>

    <div id="el">
        <p>Selected: {{selected}}</p>
        <select v-select="selected" :options="options">
            <option value="0">default</option>
        </select>
    </div>

    <script>
    Vue.directive('select', {
        twoWay: true,

        params: ['options'],

        bind: function() {
            var self = this
            $(this.el)
                .select2({
                    data: this.params.options
                })
                .on('change', function() {
                    self.set(this.value)
                })
        },
        update: function(value) {
            $(this.el).val(value).trigger('change')
        },
        unbind: function() {
            $(this.el).off().select2('destroy')
        }
    })

    var vm = new Vue({
        el: '#el',
        data: {
            selected: 0,
            options: [{
                id: 1,
                text: 'hello'
            }, {
                id: 2,
                text: 'what'
            }]
        }
    })

    </script>
</body>

</html>
